<template>
  <div class="toolbar colorMain">
    <div class="mt-10 mb-10">
      <div class="mt-10 mb-10">
        <line-from-choose @change="change"/>
      </div>
    </div>
    <!--<div><el-button :loading="excelLoad" icon="el-icon-printer" style="float: right;margin: 0 0 10px 0" size="mini" type="success" @click="downExcel" >导出数据</el-button></div>-->
    <p style="text-align: center;font-size: 16px;margin-bottom:0; background: #fff; line-height:36px;border:1px solid #ebeef5; border-bottom:none;">排名前五渠道数据</p>
    <analyse-online-table :table-data="tableData" :key_mapper="key_mapper" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange" @linkRowData="SubData($event)" />
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData.chartData1" :colors="ChartColors" :settings="chartData.chartSetting1"/>
      </el-col>
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData.chartData2" :colors="ChartColors" :settings="chartData.chartSetting2"/>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData.chartData3" :colors="ChartColors"/>
      </el-col>
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData.chartData4" :colors="ChartColors"/>
      </el-col>
    </el-row>
    <div v-if="tableData2.length">
      <p style="text-align: center;font-size: 16px;margin-bottom:0;background: #fff; line-height:36px;border:1px solid #ebeef5; border-bottom:none;">{{ tableData2[0]._chn }} / Top{{ getTop }}</p>
      <analyse-online-table :table-data="tableData2" :key_mapper="key_mapper2" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
      <el-row :gutter="24" class="m-10" >
        <el-col :span="12" class="block">
          <ve-histogram :data="chartData2.chartData1" :colors="ChartColors" :settings="chartData2.chartSetting1"/>
        </el-col>
        <el-col :span="12" class="block">
          <ve-line :data="chartData2.chartData2" />
        </el-col>
      </el-row>
      <el-row :gutter="24" class="m-10" >
        <el-col :span="12" class="block">
          <ve-line :data="chartData2.chartData3" :colors="ChartColors" />
        </el-col>
        <el-col :span="12" class="block">
          <ve-line :data="chartData2.chartData4"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { yesterday } from '@/model/DateRange'
import { channelAnalysis } from '@/api/table'
import mixins from '@/model/mixins'
import mixinsFrom from '@/model/mixinsFrom'

export default {
  name: 'Play',
  mixins: [mixinsFrom, mixins],
  data() {
    return {
      chartData: {
        chartSetting1: {
          axisSite: { right: ['register_user_rate'] },
          showLine: ['register_user_rate']
        },
        chartSetting2: {
          axisSite: { right: ['real_register_rate'] },
          showLine: ['real_register_rate']
        },
        chartData1: {
          columns: ['_chn', 'register_user', 'register_user_rate'],
          rows: []
        },
        chartData2: {
          columns: ['_chn', 'real_register_user', 'real_register_rate'],
          rows: []
        },
        chartData3: {
          columns: ['_chn', 'new_arpu'],
          rows: []
        },
        chartData4: {
          columns: ['_chn', 'new_arppu'],
          rows: []
        }
      },
      chartData2: {
        chartSetting1: {
          axisSite: { right: ['register_user_rate'] },
          showLine: ['register_user_rate']
        },
        chartSetting2: {
          axisSite: { right: ['real_register_rate'] },
          showLine: ['real_register_rate']
        },
        chartData1: {
          columns: ['day', 'register_user', 'register_user_rate'],
          rows: []
        },
        chartData2: {
          columns: ['day', 'real_register_user', 'real_register_rate'],
          rows: []
        },
        chartData3: {
          columns: ['day', 'new_arpu'],
          rows: []
        },
        chartData4: {
          columns: ['day', 'new_arppu'],
          rows: []
        }
      },
      tableData2: [],
      key_mapper2: [],
      queryFrom: {
        interval_type: 'day',
        target_time: yesterday
      },
      API: channelAnalysis,
      getTop: ''
    }
  },
  watch: {
    tableData() {
      const chartFrom = this.tableData.slice(0, this.tableData.length - 1)
      this.chartData.chartData1.rows = chartFrom
      this.chartData.chartData2.rows = chartFrom
      this.chartData.chartData3.rows = chartFrom
      this.chartData.chartData4.rows = chartFrom
      this.chartData = this.pie(this.chartData, this.key_mapper)
    },
    tableData2() {
      const chartFrom = this.tableData2.slice(0, this.tableData2.length - 2)
      this.chartData2.chartData1.rows = chartFrom
      this.chartData2.chartData2.rows = chartFrom
      this.chartData2.chartData3.rows = chartFrom
      this.chartData2.chartData4.rows = chartFrom
      this.chartData2 = this.pie(this.chartData2, this.key_mapper2)
    }
  },
  created() {
    this.sendBoth()
    // this.tableData = this.tableData.splice(5, 1)
  },
  methods: {
    SubData(row) {
      this.getData(Object.assign({}, this.queryFrom, { specific_chn: row._chn }), this.API, 'key_mapper2', 'tableData2')
      this.getTop = row.rank
    },
    sendBoth() {
      this.getData(this.queryFrom, this.API, 'key_mapper', 'tableData')
      // this.getData(Object.assign({}, this.queryFrom, { report_type: 'recharge_average' }), this.API, 'key_mapper2', 'tableData2')
    },
    change(data) {
      Object.assign(this.queryFrom, data)
      this.getData(data)
    }
  }
}
</script>
